import React, { useState, useRef, useEffect } from 'react';
import type { Current } from '../../types/typeings';
import { Button, Modal } from "antd";
import type { ModalFuncProps } from "antd";
import type { ModalProps } from "antd/es";
import { diff as DiffEditor } from "react-ace"; // 修正导入

import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/mode-json';

type DiffEditorModalProps = ModalProps & ModalFuncProps & {
    diff?: Current.DiffContent;
    defaultLanguage?: string;
    mode?: string;
    onCancel?: () => void;
    onSubmit?: () => Promise<void> | undefined;
    onRequestClose?: () => void;
    leftLabel?: string;
    rightLabel?: string;
    width?: string;
    height?: string;
};

const DiffEditorModal: React.FC<DiffEditorModalProps> = (props) => {
    // 兼容新旧两套属性集
    const { 
        title, 
        open, 
        diff, 
        defaultLanguage = 'javascript', 
        mode,
        onCancel, 
        onSubmit, 
        onRequestClose,
        width,
        height,
        ...rest 
    } = props;

    const finalOnCancel = onRequestClose || onCancel;

    // 处理内容
    const original = diff?.original || ''
    const modified = diff?.modified || ''
    const finalMode = mode || defaultLanguage;

    const [isEditorReady, setIsEditorReady] = useState(false);
    const diffEditorRef = useRef<any>(null);

    useEffect(() => {
        if (open) {
            // Modal 打开时设置准备状态
            setIsEditorReady(true);
        } else {
            setIsEditorReady(false);
        }
    }, [open]);

    // 处理编辑器加载
    const handleEditorLoad = (editor: any) => {
        diffEditorRef.current = editor;
        // 确保编辑器正确调整尺寸
        setTimeout(() => {
            editor && editor.resize();
        }, 0);
    };

    return (
        <Modal
            title={title || '代码差异对比'}
            open={open}
            onCancel={finalOnCancel}
            afterOpenChange={(visible) => {
                if (visible) {
                    // 延迟确保 Modal 完全渲染
                    setTimeout(() => {
                        if (diffEditorRef.current) {
                            diffEditorRef.current.resize();
                        }
                    }, 50);
                }
            }}
            width={width || "80vw"}
            footer={[
                onSubmit && (
                    <Button key="submit" type="primary" onClick={onSubmit}>
                        提交
                    </Button>
                ),
                <Button key="cancel" onClick={finalOnCancel}>
                    关闭
                </Button>
            ]}
            {...rest}
        >
            <div style={{ height: height || "70vh" }}>
                {isEditorReady && (
                      <DiffEditor
                          mode={finalMode}
                          theme="github"
                          value={[original, modified]}
                          onLoad={handleEditorLoad}
                          width="100%"
                          height="100%"
                          fontSize={14}
                          showGutter={true}
                          showPrintMargin={false}
                          setOptions={{
                              showLineNumbers: true,
                              useWorker: false,
                              tabSize: 2,
                          }}
                      />
                )}
            </div>
        </Modal>
    );
};

export default DiffEditorModal;